<template>
    <div class="user">
        <div class="profile">
            <img src="@/assets/images/aili.gif" alt="">
        </div>
        <div class="name">
            <div><span>杨奇奇</span><span class="bilibili" @click="toBiliBili">@一只小鸟向南飞</span></div>
            <div>做一个有用的牛马🐂🐴,面朝电脑💻,春暖花开😁</div>
        </div>
    </div>
</template>

<script setup lang="ts">
const emit = defineEmits(["toBiliBili"])
const toBiliBili = ()=>{
    emit("toBiliBili")
}
</script>

<style lang="scss" scoped>
.user {
    display: flex;
    gap: 0 20px;
    height: 100px;
    padding: 16px;
    box-sizing: border-box;

    .profile {
        width: 60px;
        height: 60px;
        /* 平滑过渡效果 */
        transition: transform 0.5s ease-in-out;
        /* 保持动画最后一帧的状态 */
        animation-fill-mode: forwards;

        img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            user-select: none;
        }
    }

    .profile:hover {
        transform: rotate(360deg);
    }

    .name {
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: "qq";

        .bilibili {
            color: #61adda;
            cursor: pointer;
            margin-left: 6px;
        }
    }
}
</style>